import { Component, Input, OnInit } from '@angular/core';
import { Chart } from '@antv/g2';

@Component({
  selector: 'app-water-level',
  templateUrl: './water-level.component.html',
  styleUrls: ['./water-level.component.scss']
})
export class WaterLevelComponent implements OnInit {


  @Input() data: any
  charts:Chart= null;

  constructor() { }

  ngOnInit() {


  }
  configureChart(chart:Chart) {
    if (this.charts) {
      this.charts.destroy();
    }
    this.charts = chart;
    this.charts.data(this.data);
    // this.charts.data(mockRainFall);
    this.charts.scale({
      DATETIME: {
        range: [0, 1],
      },
      q: {
        min: 0,
        nice: true,
      },
      z: {
        min: 0,
        nice: true,
      },
    });
    this.charts.tooltip({
      showCrosshairs: true, // 展示 Tooltip 辅助线
      shared: true,
    });
    chart.legend(true);
    chart.line()
      .position('dateTime*q')
      .color('red')
      .size(3)
      .shape('smooth');
    chart.line()
      .position('dateTime*z')
      .color('#fdae6b')
      .size(3)
      .shape('smooth');
    this.charts.render();
  }
  ngOnDestoroy() {
    this.charts?.destroy();
  }
}
